<template>
	<view class="content">
		<view  class="head_nav" :style="{background: 'url('+ bgurl +'/policy/user_img/my_bg.png)'}">
			<view class="navs"   >
				<!-- <image style="width: 100%;position: absolute; z-index: -1;" src="@/static/picture/indexbg.png" mode="widthFix" lazy-load></image> -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="wid" :style="{height: `${statusBarHeight}px`}"></view>
				<!-- #endif --> 
				<view class="navbar"  :style="{height: `${titleBarHeight}px`}">
					<!-- #ifdef MP-WEIXIN -->
					<view class="left"  :style="{lineHeight: `${titleBarHeight}px` }" @click="goBack">
						<uv-icon name="arrow-left" color="#fff" size="20"></uv-icon> 
					</view>
					<!-- #endif --> 
					<view class="search" :style="{lineHeight: `${titleBarHeight}px` }">
						<view class="fx-row-sta search_inp" >
							<uv-icon style="margin-left: 12rpx;" name="search" color="#999999" size="20"></uv-icon>
							<!-- <span class="ft26 grey2">搜索项目/技师等</span> -->
							<uv-input class=" ft26" placeholder="搜索技师" placeholder-style="font-size:26rpx;color:#999" border="none" clearable @input="searchinp" :focus="isFocus"></uv-input>
						</view>
						<span class="search_btn" @click="searchBtn">搜索</span>
					</view> 
				</view> 
			</view> 
		 </view> 
		 <!-- 技师列表 -->
		 <block  v-if="total>0">
		 <!-- #ifndef H5 -->
		 <view  class="userList" :style="{marginTop:'calc(10rpx + '+ allBarHeight+'px)'}">
		 <!-- #endif --> 
		 <!-- #ifdef H5 -->
		 <view  class="userList" :style="{marginTop:'calc(0rpx + '+ allBarHeight+'px)'}">
		 <!-- #endif --> 
			 <view  class="user_item fx-row-sb-c" v-for="(item,index) in project" :key='item.id' @click.stop="godetails(item,index)">
			 	<view class="user_pho fx-row-c-c  mr4">
			 		<view class="label label_bg1" v-if="item.status!=10 && item.subStatus==10" >{{item.tag}}</view>
			 		<view class="label label_bg2" v-else-if="item.status!=10 && item.subStatus==20" >{{item.tag}}</view>
			 		<view class="label label_bg3" v-else-if="item.status==10" >休息中</view>
			 		<image class="e_icon" v-if="item.type==20" src="@/static/picture/excellent.png" ></image>
			 		<view class="picture mr26">
			 			<image :src="item.workPhoto" lazy-load mode='aspectFill' ></image> 
			 		</view> 
			 	</view>
			 	<view class="fx-col-sb" style="width: 448rpx; height: 160rpx;">
			 		<view class="fx-row-sta">
			 			<view class="text-beyond ft30 user_name">{{item.name}}</view>
			 			<view class="user_collect fx-row-sta" @click.stop="collect(item)">
			 				<image class="mr4" v-if="!item.userCollectionFlag" src="@/static/picture/collect.png"></image>
			 				<image class="mr4" v-else src="@/static/picture/collect_act.png"></image>
			 				<span >{{item.followCount}}</span>
			 			</view>
			 		</view> 
			 		<view class="fx-row-sta grey3"> 
			 			<span class="text-beyond ft24" style="width: 200rpx;">已服务：{{item.selectCount}}单 </span>
			 		</view> 
			 		<view class="fx-row-sta mt10 grey3 ft26">
			 			<view class="fx-row-sta mr26">
			 				<image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;" src="@/static/picture/grade.png" mode="widthFix" lazy-load></image>
			 				<span>{{item.score}}</span>
			 			</view>
			 			<view class="fx-row-sta ">
			 				<image style="width: 22rpx;height: 24rpx;margin-right: 6rpx;" src="@/static/picture/address3.png" mode="widthFix" lazy-load></image>
			 				<span>{{item.distance}}km</span> 
			 			</view> 
			 		</view> 
			 		<view class="item_float  ft18"  >最早可约: {{item.appointmentTime}}</view>  
			 		<view class="item_btn" @click.stop="reserve(item,index)" v-if="item.status!='10'">立即预约</view>  
			 	</view>    
			 </view> 
		 </view>
		 </block>
		 <!-- 缺省状态 --> 
		 <block v-if="total==0">
			 <view class="emptys">
			 	 <image src="@/static/picture/empty.png" mode="widthFix" lazy-load></image>
			 	 <view>没有相关技师</view>
			 </view> 
		 </block>
		 <!-- 预约弹窗 -->
		 <uv-popup mode='bottom'  zIndex='991' round="12" duration='300' closeable ref="popup" >
		 	<subscribeList ref="cou" :state="stateindex" :projectList="projectLists" :projectInfo="projectInfo"   @addProject='placeOrder' @goInfor='goInfor'></subscribeList> 
		 </uv-popup>
	</view>
</template>

<script>
	import { massagistList,geturl,massagistDetails } from '@/utils/api.js'
	import badgeMix from '@/common/mixins.js'
	import config from '@/config.js' 
	import empty from '@/components/empty.vue'
	import subscribeList from '@/components/subscribe-list.vue' 
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		mixins: [badgeMix,empty],
		components:{subscribeList},
		data() {
			return {
				titleBarHeight:this.titleBarHeight ,
				statusBarHeight:this.statusBarHeight ,
				allBarHeight:this.allBarHeight, 
				isFocus:true,
				isShow:true,
				project:[],
				searchCon:'',
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				bgurl:config.imageUrl,
				total:0,
				stateindex:'0',
				projectLists:[],
				projectInfo:{}, 
			}
		},
		onLoad() {
			 // this.menuButton()
		},
		methods: { 
			// 筛选
			tabshow(e){
				console.log('item', e);
			},
			searchinp(e){
				console.log(e);
				this.searchCon = e
			},
			searchBtn(){
				this.project = []
				if(!this.searchCon){
					return uni.showToast({
						title:'请输入技师名称',
						icon:'none'
					})
				}
				// 技师列表 
				this.getjsList(this.searchCon)  
			},
			getjsList(massagistName){  
				this.isLoading = 'loading'
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数
					"lon":uni.getStorageSync('longitude'),  //经度
					"lat":uni.getStorageSync('latitude'),  //纬度
					"serviceId":'',  //项目id
					"type":'', //技师级别id 
					"massagistName":massagistName, //技师名称
					"cityId":uni.getStorageSync('cityId'),
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif
				} 
				massagistList(datas).then((res) => {
					console.log(res);  
					if(res.code == '200'){
						this.project = res.result.records
						this.total = res.result.total 
						this.isLoading = 'nomore' 
						// const data = res.result.records  
						// this.project = [...this.project,...data] 
						// this.isLoading = data.length < this.pageSize ? 'nomore' : '';   
					}
				})  
			},  
			// 技师详情
			godetails(item,index){ 
				uni.navigateTo({
					url:'/pages/technician/userDetail?id='+item.id
				})
			},
			// 技师收藏
			collect(item){ 
				this.isCollect(item.id).then((res)=>{
					this.$nextTick(()=>{ 
						item.userCollectionFlag = !item.userCollectionFlag 
						item.userCollectionFlag?item.followCount=item.followCount+1:item.followCount!=0?item.followCount=item.followCount-1:item.followCount 
					}) 
				}) 
			},
			// 项目详情
			goInfor(projectId){  
				this.$refs.popup.close();
				uni.navigateTo({
					url:'/pages/index/details?id='+projectId
				})
			},
			// 立即预约弹窗
			async reserve(item,index){ 
				
				await this.enterPrecontract(item.id).then((res)=>{ 
					if(res == 200){ 
						// 技师详情
						const datas = {
							'massagistId':item.id,
							"lon":uni.getStorageSync('longitude'),  //经度
							"lat":uni.getStorageSync('latitude'),  //纬度 
							// #ifdef MP-WEIXIN
							"source" : 'WeChatMini',
							"version" : config.appInfo.version
							// #endif
						}
						massagistDetails(datas).then((res) => { 
							if(res.code == '200'){ 
								res.result.serviceList.forEach((item,index)=>{
									res.result.serviceList[index].num = 0
								})
								this.projectLists = res.result.serviceList
								this.projectInfo = res.result 
							}  
						}) 
						this.$refs.popup.open('bottom');
					}else if(res.code == 8001){
						toast(res.message)
						setTimeout(()=>{
							this.getjsList(this.searchCon)  
						},1000)
					}
				}) 				
			},
			// 立即预约
			async placeOrder(addOrderId,num,mid){  
				this.$refs.popup.close();
				uni.navigateTo({
					url:`/pages/order/orderPay?pid=${addOrderId}&mid=${mid}&num=${num}`
				})  
			},
		}, 
		// 上拉刷新
　　	onReachBottom() {   
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++
			//调用请求接口
			this.getjsList()
		},
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page;
	}
	.head_nav{
		position: fixed;
		top: 0;
		width: 750rpx;	
		background-size: 100% auto !important;
		box-sizing: border-box; 
		overflow: hidden;
		z-index: 999;
		.navs{ 
			/*  #ifdef  MP-WEIXIN  */
			padding-bottom:10rpx ;
			/*  #endif  */ 
			/*  #ifdef  H5  */
			height: 100rpx;
			/*  #endif  */
		}
		.navbar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			/*  #ifdef  MP-WEIXIN  */
			width: 690rpx;
			/*  #endif  */
			/*  #ifdef  H5  */
			width: 750rpx;
			margin: auto;
			/*  #endif  */
			text-align: center;
			font-size: 40rpx;
			color: #fff;
			.left{  
				height: 40rpx; 
				margin: 32rpx 20rpx 32rpx 32rpx; 
				font-size: 26rpx; 
			}  
			.search{
				display: flex;
				justify-content:space-between;
				align-items: center; 
				/*  #ifdef  H5  */
				width: 688rpx;
				margin: 0 auto;
				/*  #endif  */
				/*  #ifdef  MP-WEIXIN  */
				width: 420rpx;
				margin-right: 150rpx;
				/*  #endif  */
				height: 60rpx;
				padding: 4rpx 6rpx 4rpx 20rpx;
				background-color: #fff;
				border-radius: 44rpx; 
				.search_btn{
					width: 104rpx;
					height: 60rpx;
					font-size:24rpx ;
					background-color: $uni-main;
					border-radius: 31rpx;
					line-height: 60rpx;
				}
				.search_inp{
					/*  #ifdef  H5  */
					width: 560rpx;
					/*  #endif  */
					/*  #ifdef  MP-WEIXIN  */
					width: 300rpx; 
					/*  #endif  */
				}
			}
		} 
	}
	.uv-tabs{
		position: fixed;
		margin-top: -5rpx;
		width: 750rpx;	 
		height: 90rpx;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	} 
	.userList{
		position: relative;
		width: 690rpx;
		padding: 30rpx; 
		// margin-top:calc( var(--status-bar-height) + 105px);
		.user_col{
			height: 100rpx;
			display: flex;
			flex-direction:column;
			// align-content: space-between;  
			justify-content: space-between;
		}
		.user_item{
			position: relative;
			width:670rpx;
			padding:0 20rpx 12rpx 0;
			margin-bottom: 16rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
			.user_name{
				max-width: 160rpx;
				font-weight: bold;
			}
			.user_collect{
				margin-left: 12rpx;
				font-size: 24rpx;
				color: #696969;
				image{
					width: 28rpx;
					height: 26rpx;
				}
			}
			.user_pho{
				position: relative;
				width: 208rpx;
				height: 208rpx;
				.e_icon{
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 2;
				}
			}
			.picture{
				position: relative;
				width: 160rpx;
				height: 160rpx;
				margin: 21rpx auto; 
				border-radius:50%;
				overflow: hidden; 
				z-index: 1;
				image{
					width: 160rpx;
					height: 160rpx;
				} 
			} 
			.label{
				position: absolute; 
				bottom: 8rpx;
				width: 128rpx;
				height: 34rpx;  
				border-radius: 18rpx;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 34rpx;
				z-index: 3;
			}
			.label_bg1{
				background: #24C276;
			}
			.label_bg2{
				background: #FF9023;
			}
			.label_bg3{
				background: #AEAEAE;
			}
			.img_tip{
				width: 20rpx;
				height: 22rpx;
				margin-right: 4rpx;
			}
			.item_float{
				position: absolute;
				right: 20rpx; 
				padding: 10rpx 14rpx;
				// background: rgba(154, 193, 255, .3) ;
				background: $uni-main-near;
				border-radius: 4rpx; 
				color: $uni-main-c;
				font-size: 22rpx;
				// opacity: 0.3;
			}
			.item_btn{
				position: absolute;
				right: 20rpx;
				bottom: 28rpx;
				width: 176rpx;
				height: 50rpx; 
				background-color: $uni-main;
				border-radius: 30rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}
		
	}
	.emptys{
		width: 300rpx;
		margin: 0 auto;
		padding: 300rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		image{
			width: 260rpx;
			margin-bottom: 28rpx;
		}
	}
</style>
